<template>
  <div>
    <el-dialog title="题目预览" :visible.sync="dialogFormVisible">
      <el-form :model="titleInfo" class="demo-form-inline">
        <div class="item"><b>[题型] : </b>{{titleInfo.questionType}}</div>
        <div class="item"><b>[编号] : </b>{{titleInfo.id}}</div>
        <div class="item"><b>[难度] : </b>{{titleInfo.difficulty}}</div>
        <div class="item"><b>[标签] : </b>{{titleInfo.tags}}</div>
        <div class="item"><b>[学科] : </b>{{titleInfo.subjectName}}</div>
        <div class="item"><b>[目录] : </b>{{titleInfo.directoryName}}</div>
        <div class="item"><b>[方向] : </b>{{titleInfo.direction}}</div>
        <el-divider></el-divider>
        <el-form-item label="[题干] :" style="color: blue">
        <p v-html="titleInfo.question"></p>
        <template v-if="titleInfo.questionType === '1'">
            <el-radio-group v-model="radioArr">
              <el-radio v-for="item in titleInfo.options" :key="item.id" :label="item.title">{{item.title}}</el-radio>
            </el-radio-group>
          </template>
          <template v-if="titleInfo.questionType === '2'">
            <el-checkbox-group v-model="checkedArr">
              <el-checkbox v-for="item in titleInfo.options" :key="item.id" :label="item.title"></el-checkbox>
            </el-checkbox-group>
          </template>
          <template v-if="titleInfo.questionType === '3'">
            <div></div>
          </template>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="[参考答案] :">
          <el-button type="danger" @click="live">视频答案预览</el-button><br>
          <video :src="titleInfo.videoURL" autoplay
          v-if="liveON"
          style="width: 300px; height: 200px;" ></video>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="[答案解析] :"><p v-html="titleInfo.answer"></p></el-form-item>
        <el-divider></el-divider>
        <el-form-item label="[题目备注] :">{{titleInfo.tags}}</el-form-item>
        <el-divider></el-divider>
        <el-button
        type="primary"
        size="medium"
        style="width: 80px; height: 40px; margin-left: 45%; margin-top: 10px; "
        @click="guanbi"
        >关闭</el-button>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    titleInfo: {
      type: Object,
      required: true
    },
    checkedArr: {
      type: Array
    },
    radioArr: {
      type: String
    }
  },
  data () {
    return {
      dialogFormVisible: false, // 弹出显示否,默认隐藏
      liveON: false // 视平开关
    }
  },
  methods: {
    dialogFormV () { // 显示弹层
      this.dialogFormVisible = true
      // console.log(this.titleInfo)
    },
    live () {
      this.liveON = true
    },
    guanbi () { // 弹出关闭
      this.liveON = false
      this.dialogFormVisible = false
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.item {
  display: inline-block;
  margin: 10px 0;
  width: 25%;
}
</style>
